<template>
  <div class="body">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in BannerList" :key="index">
        <img :src="item.img">
      </van-swipe-item>
    </van-swipe>
    <!-- 导航三图 -->
    <nav>
      <div>
        <van-icon name="gift-card-o"/>
        <p>特色课</p>
      </div>
      <div>
        <van-icon name="chat-o" />
        <p>一对一辅导</p>
      </div>
      <div>
        <van-icon name="video-o" />
        <p>学习日历</p>
      </div>
    </nav>

    <!-- 内容一 -->
    <div class="content">
      <div class="box" v-for="(x,index) in this.indexList" :key="index">
        <p class="name">{{x.channel_info.name}}</p>
        <div @click="detail(xx.teacher_id||xx.id)" class="df"  v-for="(xx,indexx) in x.list" :key="indexx">
          <p v-if="xx.title" >{{xx.title}}</p>
          <div>
            <img :src="xx.teacher_avatar||xx.cover_img" :alt="xx.teacher_name">
          </div>
          <div>
            <p>{{xx.teacher_name}}</p>
            <p>{{xx.introduction}}</p>
          </div>
          <p v-if="xx.id" >{{xx.id}}人报名</p>
        </div>
      </div>
    </div>
    <navButtom></navButtom>
  </div>
  <!-- <navButtom></navButtom> -->
</template>
<script>
import { getIndex ,getInfo} from "../http/request";
export default {
  data() {
    return {
      BannerList: [
        {
          img:
            "http://120.53.31.103:84/uploads/image/2021-09-08/lXEERcH4CIb3reka5yruT7RW7jMD4K7vreK6utgq.jpeg"
        },
        {
          img:
            "http://120.53.31.103:84/uploads/image/2021-09-08/zP1osWNNxyfKSX1Dt6IDUUh5Vpz8AxD39BBaQECW.jpeg"
        },
        {
          img:
            "http://120.53.31.103:84/uploads/image/2021-09-08/pihYvxiYLTL5XCVs0sMFzlvY2TfSUj95Tz0IWjgF.jpeg"
        }
      ],
      indexList: []
    };
  },
  methods: {
    detail(id){
      console.log(id);
      getInfo(id).then(res=>{
      console.log(res);
    })
    }
  },
  created() {
    getIndex().then(res => {
      // console.log(res.data);
      this.indexList = res.data;
    });
  }
};
</script>
<style  lang="scss" scoped>
.body {
  height: 100%;
  background-color: #f2f3f5;
}
.my-swipe {
  z-index: 1 !important;
}
.my-swipe .van-swipe-item {
  z-index: 1;
  width: 100%;
  img {
    width: 100%;
  }
}
nav {
  display: flex;
  justify-content: space-around;
  text-align: center;
  box-sizing: border-box;
  padding: 0 0.2415rem;
  div {
    width: 2.7536rem;
    height: 2.7536rem;
    box-sizing: border-box;
    padding-top: 0.7rem;
    border-radius: 0.3039rem;
    background-color: #fff;
    .van-icon-gift-card-o {
      font-size: 65px;
    }
    .van-icon-chat-o {
      font-size: 65px;
    }
    .van-icon-video-o {
      font-size: 65px;
    }
  }
}
.content {
  box-sizing: border-box;
  padding: 0 0.2415rem;
  .box {
    .name {
      line-height: 0.5rem;
      height: 0.5rem;
      border-left: 0.0725rem solid red;
      padding: 0 0.2415rem;
      box-sizing: border-box;
      font-size: 30px;
    }
  }
}
.df {
  margin-top: 20px;
  background-color: #fff;
  // box-sizing: border-box;
  padding: 40px;
  display: flex;
  div:first-child{
    width: 100px;
    height: 100px;
    // border: 1px solid #000;
    overflow: hidden;
    border-radius: 50px;
    img{
      width: 100px;
      height: 100px;
    }
  }
  div:nth-child(2){
    flex: 1;
    margin-left: 10px;
    vertical-align: middle;
    line-height: 50px;
  }
}
</style>